<template>
  <div class="unbind">
      <app-head title="更换手机号"></app-head>

      <div class="unbind-top">
          <h1 class="current">当前已绑定手机账号：{{userinfo.mobile}}</h1>
          <p class="desc">需要先验证以绑定的手机号码，才能换绑新的手机号码，请先验证</p>
      </div>

      <div class="h5form">
          <div class="h5form-item">
              <input class="h5form-input" v-model="code" placeholder="请输入动态验证码" type="text">
              <button class="h5form-getcode"
                      :disabled="codeText !== '获取验证码'"
                      @click="handleCode">{{codeText}}</button>
          </div>

          <div class="h5form-submit">
              <button @click="handleCheck">确认</button>
          </div>
      </div>
  </div>
</template>

<script>
import api from '@/api'
import { mapGetters } from 'vuex'
export default {
  name: 'unbind',
  components: {
  },
  data () {
    return {
      code: '',
      codeText: '获取验证码'
    }
  },
  computed: {
    ...mapGetters([
      'userinfo'
    ])
  },
  methods: {
    handleCheck () {
      api.smsCheck({
        'sms-type': 4,
        'sms-mobile': this.userinfo.mobile,
        'sms-code': this.code
      }, res => {
        this.$tips(res)
        this.$router.push('/account/bind')
      }, msg => {
        this.$tips(msg)
      })
    },
    handleCode () {
      api.smsSend({
        'sms-type': 4,
        'sms-mobile': this.userinfo.mobile
      }, res => {
        this.$tips(res)
        this.codeText = 120
        let timer = setInterval(() => {
          this.codeText--
          if (this.codeText < 0) {
            clearInterval(timer)
            this.codeText = '获取验证码'
          }
        }, 1000)
      }, msg => {
        this.$tips(msg)
      })
    }
  },
  created () {

  }
}
</script>

<style scoped="scoped" lang="scss">

    .unbind {
        &-top {
            padding:  0.14rem 0.15rem 0.2rem 0.15rem;
            .current {
                color: #333333;
                font-size: 0.15rem;
            }
            .desc {
                color: #999999;
                font-size: 0.13rem;
            }
        }
    }

</style>
